<!DOCTYPE html><html><head><title>07-第七章  选择器及样式优先级 常用css3</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="07-第七章-选择器及样式优先级-常用css3">07-第七章  选择器及样式优先级 常用css3</h1>

<p></p>



<h2 id="一选择器优先级">一、选择器优先级</h2>

<blockquote>
  <p><code>*</code>{} <br>
  <code>tagName</code>{} <br>
  <code>.class</code>{} <br>
  <code>#id</code>{}</p>
</blockquote>

<p>总结                <code>*</code>  &lt;   <code>tagName</code>    &lt;     <code>class</code>   &lt;   <code>id</code> </p>

<hr>



<h2 id="二选择器特殊情况">二、选择器特殊情况</h2>

<p>1、级别相同的选择器：后写的样式会覆盖前面的；(后来居高)</p>

<blockquote>
  <p>.wrap{background:red;} <br>
  .wrap{background:green;}</p>
</blockquote>

<p>2、 复杂后代选择器</p>

<blockquote>
  <p>1）比高低顺序依次是: ID选择器 class选择器 tagName{} ， <br>
      2）ID选择器个数不相等，ID个数多的优先级高，后面不用比 <br>
      2）ID选择器个数相等，则看class个数多的优先级高，后面不用比 <br>
      3）class 个数相等 ，再看tagName 个数 <br>
      4）#wrap ul li .list{} 和.wrap ul li #list{}优先级一样（不分先后）</p>
</blockquote>

<p>3、 选择器使用原则：<code>准确的选中元素，并且不影响其他元素</code></p>

<hr>



<h2 id="三样式的多种形式">三、样式的多种形式</h2>

<p>一 <code>行间</code>样式                —-内部样式</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-comment line-number">1.</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">''</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div></code></pre>

<p>二 <code>内嵌</code>（css）样式           —-内部样式    </p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-comment line-number">1.</span><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
</span></div><div class="hljs-line"><span class="hljs-comment line-number">2.</span>        <span class="hljs-selector-id">#box</span>{}
</div><div class="hljs-line"><span class="hljs-comment line-number">3.</span>    <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
</div></code></pre>

<p>三 <code>外链</code> ( css )样式            —–外部样式</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs sml"><div class="hljs-line"><span class="hljs-comment line-number">1.</span>&lt;link rel=<span class="hljs-symbol">'stylesheet'</span> <span class="hljs-keyword">type</span>=<span class="hljs-symbol">'text</span>/css' href=<span class="hljs-symbol">'url</span>.css'/&gt;
</div></code></pre>

<blockquote>
  <p>=&gt;注意：需要 设置编码  <code>@charset 'UTF-8'</code>; 外链中注意    background-image 路径变化</p>
</blockquote>

<hr>



<h2 id="三样式优先级">三、样式优先级</h2>

<p>样式优先级排序：</p>

<blockquote>
  <p>外链css样式  &lt;   （内嵌css）样式    &lt;     行间样式</p>
</blockquote>

<p>!important 提升优先级（最高） 例如：<code>font-size:12px !important;</code></p>



<h2 id="四-常用的css3">四、 常用的css3</h2>

<p>分样式</p>

<blockquote>
  <ul><li>border-top-left-radius: </li>
  <li>border-top-right-radius: </li>
  <li>border-bottom-right-radius: </li>
  <li>border-bottom-left-radius:</li>
  </ul>
</blockquote>

<p>复合样式=&gt;border-radius 圆角： </p>

<blockquote>
  <ul><li>四个值： 左上   右上    右下    左下</li>
  <li>三个值：  左上   右上左下   右下</li>
  <li>两个值：  左上右下    右上左下 </li>
  <li>一个值：  所有角一样的值</li>
  </ul>
</blockquote>

<p>单位： %   px</p>

<hr>



<h2 id="五-box-shadow-盒子阴影">五、 box-shadow 盒子阴影</h2>

<blockquote>
  <ul><li>h-shadow     水平偏移量。允许负值  （必需）    </li>
  <li>v-shadow     垂直偏移量。允许负值  （必需）</li>
  <li>blur          模糊半径        （可选。）</li>
  <li>spread        阴影的大小   （可选。）</li>
  <li>color     阴影的颜色   （可选。） <br>
  外部阴影（默认）          内部阴影（inset可选 ）</li>
  </ul>
</blockquote>

<hr>



<h2 id="六overflow内容溢出-处理方式">六、overflow内容溢出 处理方式</h2>

<blockquote>
  <ul><li>visible  默认值 内容可见</li>
  <li>hidden    隐藏，超出内容部分是不可见的。</li>
  <li>scroll    出现滚动条</li>
  <li>auto  根据内容情况来决定（是否）出现滚动条</li>
  </ul>
</blockquote>

<ul><li>overflow-x 处理X方向的超出情况</li>
<li>overflow-y  处理Y方向的超出情况 <br>
=&gt; 只给一个方向的时候，另外一个方向是auto;</li>
</ul>

<hr></div></body></html>